import React from 'react';
import {
    View, 
    Text, 
    TextInput, 
    Image, 
    ImageBackground,
    TouchableOpacity, 
    KeyboardAvoidingView, 
    Platform,
    Dimensions
} from 'react-native';
import styles from './styles'
import {connect} from 'react-redux';
import {loginAction} from './actions';
import register from '../register/register';
import {naviPush, gotoView} from '../../navigatorApp/actions';
import {toast} from '../../utils/NativeUtil';
import {naviHeight,paddingTop} from '../../utils/ScreenUtil';
import themeconfig from '../../config/theme';

let {width, height} = Dimensions.get('window');

class login extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {
            loginId: '', 
            password: '',
            isFocus: false
        };
    }

    //登录
    loginClick = () => {
        var self = this;
        if (this.state.loginId.length == 0) {
            toast('请输入用户名');
            return;
        }

        if (this.state.password.length == 0) {
            toast('请输入密码');
            return;
        }

        this.props.login(this.state.loginId, this.state.password, function () {
            self.props.gotoView("home");
        }, function (res) {
            toast('登录error' + res);
        });
    }

    //忘记密码
    forgetAccountClick = () => {
        const params = {
            type: 'reset',
            title: '忘记密码'
        };
        this.props.naviPush("Register", params)
    };

    //注册
    registerClick = () => {
        const params = {
            type: 'register',
            title: '注册'
        };
        this.props.naviPush("Register", params)
    };

    userInputChange = (txt) => {
        this.setState({loginId: txt})
    };

    passwordInputChange = (txt) => {
        this.setState({password: txt})
    };


    render = () => {
        return (
            <View style={{
                flex: 1,
                backgroundColor: '#ebedea',
                flexDirection: 'column',
                alignItems: 'center'
            }}> 
                <KeyboardAvoidingView behavior={(Platform.OS === 'ios') ? 'position' : ''} keyboardVerticalOffset={ 0 }>
                    <Image style={{width: width, height: width / 375 * 233}} source={require('../../image/background.png')}/>
                    <View style={styles.inputBg}>
                        <View style={styles.inputItem}>
                            <Image source={require('../../image/img_user.png')} style={{width: 23, height: 23}}/>
                            <TextInput
                                underlineColorAndroid={'transparent'}
                                keyboardType="numeric"
                                editable={true}
                                color={themeconfig.maincolor}
                                fontSize={18}
                                style={styles.inputStyle}
                                placeholder={"请输入用户名"}
                                multiline={false}
                                value={this.state.loginId}
                                onChangeText={this.userInputChange}
                                onFocus={() => this.setState({isFocus: true})}
                                onEndEditing={() => this.setState({isFocus: false})}
                            />
                        </View>
                        <View style={styles.inputLine}/>
                        <View style={styles.inputItem}>
                            <Image source={require('../../image/img_password.png')} style={{width: 23, height: 23}}/>
                            <TextInput
                                underlineColorAndroid={'transparent'}
                                editable={true}
                                style={styles.inputStyle}
                                color={themeconfig.maincolor}
                                fontSize={18}
                                placeholder={"请输入密码"}
                                secureTextEntry={true}
                                multiline={false}
                                value={this.state.password}
                                onChangeText={this.passwordInputChange}
                                onFocus={() => this.setState({isFocus: true})}
                                onEndEditing={() => this.setState({isFocus: false})}
                            />
                        </View>
                        <View style={styles.inputLine}/>
                        <View style={{height: 40, width: 0}}/>
                        <TouchableOpacity onPress={this.loginClick}>
                            <View style={styles.btnViewStyle}>
                                <Text style={styles.loginBtnStyle}>登录</Text>
                            </View>
                        </TouchableOpacity>

                        <View style={styles.bottomViewStyle}>
                            <TouchableOpacity onPress={this.registerClick}>
                                <Text style={{fontSize: 14, color: themeconfig.maincolor}}>立即注册</Text>
                            </TouchableOpacity>
                            <View style={{
                                width: 1,
                                height: 18,
                                marginHorizontal: 10,
                                backgroundColor: 'lightgrey'
                            }}/>
                            <TouchableOpacity onPress={this.forgetAccountClick}>
                                <Text style={{fontSize: 14, color: themeconfig.maincolor}}>忘记密码</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </KeyboardAvoidingView>
                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, height: naviHeight, backgroundColor: this.state.isFocus ? themeconfig.maincolor : '#ffffff00'}}>
                    <Text style={{color: 'white', fontSize: 18, marginTop: paddingTop}}>登录</Text>
                </View>
            </View>
        )
    }
}

const mapStateToProps = (state) => {
    return {}
};

const mapDispatchToProps = (dispatch) => {
    return {
        login: (loginid, password, success, error) => {
            dispatch(loginAction(loginid, password, success, error))
        },
        naviPush: (routeName, params) => {
            dispatch(naviPush(routeName, params))
        },
        gotoView: (value) => {
            dispatch(gotoView(value))
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(login);
